<template>
  <div>
    <Row>

      <i-col span="24" class-name="y_query_right">
        <Button :type="param.operation===0?'primary':'error'" :disabled="param.selection.length==0" :icon="param.operation==0?'md-add':'md-trash'"
                class="y_condition" @click="batchOperation"
                style="min-width: 200px"
                >
          {{param.operation==0?'批量为产品添加该角标':'批量为产品删除该角标'}}
        </Button>
      </i-col>
    </Row>
    <hr>
    <Row>
      <i-col span="24" class-name="y_query_right">
        <Select v-model="param.selectedTabId" placeholder="请选择角标 (*必选)" class="y_condition" style="min-width: 200px; text-align: left;" >
          <Option v-for="item in tabs" :value="item.id" :key="item.id">
            <!--<div style="display: flex;align-items: center">-->
           <!--   <Img :src="yunPath+item.icon"  width="16px" style="margin-right: 1rem"/>-->
              {{ item.name }}
            <!--</div>-->
            </Option>
        </Select>

        <Input placeholder="产品编号" class="y_condition" v-model="param.productCode" clearable  v-show="param.selectedTabId !== ''" style="max-width: 200px;"></Input>
        <Input placeholder="产品标题" class="y_condition" v-model="param.productName" clearable  v-show="param.selectedTabId !== ''" style="max-width: 200px;"></Input>

        <div :class="this.$yMobile()?'y_condition2':'tags_state'" v-show="param.selectedTabId !== ''">
          角标状态 :&nbsp;&nbsp;&nbsp;&nbsp;
          <RadioGroup v-model="param.operation" @on-change="changeOperation">
            <Radio label="0"><span>未包含当前角标</span></Radio>
            <Radio label="-1"><span>已包含当前角标</span></Radio>
          </RadioGroup>
        </div>
        <Button type="primary" icon="md-search" class="y_condition"  @click="webList">
          查询
        </Button>
      </i-col>

    </Row>

    <Row>
      <div class="tip_div" v-show="productList.length === 0">
        <strong>操作提示 :  </strong>
        <br><br>
        <p>1. 根据角标等条件查询出产品</p>
        <p>2. 选择产品后,可以将选中的产品批量添加当前角标 或者 从将选中的产品批量移除该角标</p>
      </div>
    </Row>


    <div  v-show="productList.length!==0">
      <!--表格和分页-->
<!--      <Table stripe border class="base_table" ref="selection"-->
<!--             :columns="tableTitles" :data="productList"-->
<!--             no-data-text="暂无数据"-->
<!--             @on-selection-change="productSelectedChanged"-->
<!--      ></Table>-->
      <List style="border-bottom: 1px solid #e8eaec;margin-top: 1rem;margin-bottom: 1rem;">
        <ListItem style="display: flex;align-items: flex-start;margin-left: 1rem;">
          <Checkbox v-model="isCheckedAllMessage" @on-change="handleCheckAll">全选</Checkbox>
        </ListItem>
        <CheckboxGroup v-model="param.selection" @on-change="checkChange">
          <list-item class="list_item" v-for="(item,index) in productList">
            <div style="width:100%;padding: 0 0.5rem;"  >
              <Row type="flex" justify="space-between" align="middle">
                <i-col :xs="2" :sm="1" >
                  <Checkbox :label="item" :value="index">{{ check }}</Checkbox>
                </i-col>
                <i-col  :xs="5" :sm="2" style="text-align: left">
                  <img :src="item.productImg"
                       style="width:99%;max-width:100px;max-height:100px;"
                       @click="status.modalImage.url=item.productImg;status.modalImage.isShow = true;"/>
                </i-col>
                <i-col :xs="17" :sm="21" style="text-align: left;padding-left: 0.5rem;" >
                  <KeyValueView>#{{index+1}}</KeyValueView>
                  <KeyValueView title="SKU">
                    <a :href="$tiyProductUrl(item.code)" target="_blank">{{item.code}}</a>
                  </KeyValueView>
                  <KeyValueView title="价格">${{item.currentPrice}}</KeyValueView>
                  <KeyValueView oneline title="产品名">{{item.name}}</KeyValueView>
                </i-col>
              </Row>
            </div>
          </list-item>
        </CheckboxGroup>
      </List>

      <div style="float: right;">
        <Page :total="page.total" :page-size="page.stepNumber" :current="page.currentPage" @on-change="changePage"
              @on-page-size-change="sizeChange" :page-size-opts="[40,60,80,120]"
              show-sizer show-elevator/>
      </div>

    </div>


  </div>
</template>


<!--javascript 代码-->
<script>
  import tiyData from "./js/tab/product_tab_data";
  import {webList,init,batchOperation} from "./js/tab/product_tab_fun";
  import KeyValueView from "../widgets/KeyValueView";
  import {selectedChange} from "./js/list/list_funs";

    export default {
      data() {
        return {
          page: tiyData.tPage,
          productList: tiyData.tData.productList,
          tabs: tiyData.tData.tabs,
          tableTitles: tiyData.tTable,
          param: tiyData.tParam,
          yunPath: this.$store.getters.imgPrefix,
          selectedTabId:tiyData.tParam.selectedTabId,
          check: '',
          isCheckedAllMessage: false,
        }
      },
      components:{KeyValueView},
      computed : {

      },
      methods: {
        checkChange() {
          if (this.param.selection.length == this.productList.length) {
            this.isCheckedAllMessage = true;
          } else {
            this.isCheckedAllMessage = false;
          }
        },
        handleCheckAll() {
          let self = this;
          self.param.selection.splice(0, self.param.selection.length);
          if (self.isCheckedAllMessage) {
            for(let i=0;i<self.productList.length;i++){
              self.param.selection.push(self.productList[i]);
            }
          }
        },
        webList(){
          // tiyData.tParam.selectedTabId='';
          tiyData.tPage.currentPage = 1;
          webList(this,tiyData)
        },
        changePage(page){
          tiyData.tPage.currentPage = page;
          webList(this, tiyData);
        },
        sizeChange(p){
          tiyData.tPage.stepNumber = p;
          webList(this, tiyData);
        },
        batchOperation(){
          batchOperation(this,tiyData);
        },
        productSelectedChanged(selection){
          tiyData.tParam.selection=selection;
        },
        changeOperation(state){
          this.$ySpliceAll(tiyData.tParam.selection);
          if(tiyData.tParam.selectedTabId!=''){
            webList(this,tiyData);
          }
        }
      },
      mounted(){
        init(this,tiyData);
      }
    }
</script>

<!--css样式-->
<style lang="less" scoped>
@import  (once,optional) "../css/base";
  .operation_item {
    text-align: left;
    margin-right: 20px;
  }


  .y_condition2 {
    margin: 0.5rem 1rem;
  }

  .tags_state {
    width: 380px;
    margin-right: 1rem;
  }

  .list_item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .list_item:hover {
    background: @tiySectionColor;
  }
</style>
